/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  Button,
  Form,
  Input,
  Pagination,
  Select,
  Table,
  type TableColumnsType,
  type TableProps,
} from "antd";
import React, { useState } from "react";
import "./post.scss";

export default function Post() {
  const [form] = Form.useForm();
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const onFinish = (values: any) => {
    console.log("Finish:", values);
  };
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  type TableRowSelection<T extends object = object> =
    TableProps<T>["rowSelection"];

  interface DataType {
    key: React.ReactNode;
    number: number;
    postCode: string;
    postName: string;
    sort: number;
    status: string;
    remark?: string;
  }

  const columns: TableColumnsType<DataType> = [
    {
      title: "序号",
      dataIndex: "number",
      key: "number",
      width: 80,
    },
    {
      title: "岗位编号",
      dataIndex: "postCode",
      key: "postCode",
      width: 120,
    },
    {
      title: "岗位名称",
      dataIndex: "postName",
      key: "postName",
      width: 200,
    },
    {
      title: "排序",
      dataIndex: "sort",
      key: "sort",
      width: 80,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      render: (status: string) => (
        <span style={{ color: status === "启用" ? "#52c41a" : "#ff4d4f" }}>
          {status}
        </span>
      ),
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      width: 150,
    },
    {
      title: "操作",
      key: "action",
      width: 120,
      render: () => (
        <span style={{ fontSize: "14px" }}>
          <a href="#" style={{ marginRight: "10px", color: "#1890ff" }}>
            编辑
          </a>
          <a href="#" style={{ color: "#ff4d4f" }}>
            删除
          </a>
        </span>
      ),
    },
  ];

  // 模拟数据
  const data: DataType[] = [
    {
      key: 1,
      number: 1,
      postCode: "GWBH2683",
      postName: "行政助理",
      sort: 1,
      status: "启用",
    },
    {
      key: 2,
      number: 2,
      postCode: "GWBH4235",
      postName: "人力资源专员",
      sort: 2,
      status: "停用",
    },
    {
      key: 3,
      number: 3,
      postCode: "GWBH6931",
      postName: "财务分析师",
      sort: 3,
      status: "启用",
    },
    {
      key: 4,
      number: 4,
      postCode: "GWBH2473",
      postName: "销售代表",
      sort: 4,
      status: "启用",
    },
    {
      key: 5,
      number: 5,
      postCode: "GWBH8058",
      postName: "市场营销经理",
      sort: 5,
      status: "启用",
    },
    {
      key: 6,
      number: 6,
      postCode: "GWBH9011",
      postName: "研发工程师",
      sort: 6,
      status: "启用",
    },
    {
      key: 7,
      number: 7,
      postCode: "GWBH3219",
      postName: "技术支持专员",
      sort: 7,
      status: "启用",
    },
    {
      key: 8,
      number: 8,
      postCode: "GWBH3585",
      postName: "运营管理",
      sort: 8,
      status: "启用",
    },
    {
      key: 9,
      number: 9,
      postCode: "GWBH4481",
      postName: "采购经理",
      sort: 9,
      status: "启用",
    },
    {
      key: 10,
      number: 10,
      postCode: "GWBH1278",
      postName: "生产主管",
      sort: 10,
      status: "启用",
    },
  ];

  // 行选择配置
  const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    onSelect: (
      record: DataType,
      selected: boolean,
      selectedRows: DataType[]
    ) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (
      selected: boolean,
      selectedRows: DataType[],
      changeRows: DataType[]
    ) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  const [checkStrictly] = useState(false);

  // 计算分页数据
  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return (
    <div className="post-management">
      <div className="search-filter">
        <Form
          form={form}
          name="horizontal_login"
          layout="inline"
          onFinish={onFinish}>
          <Form.Item label="岗位" name="username">
            <Input placeholder="请输入岗位名称/编号" allowClear />
          </Form.Item>
          <Form.Item label="状态" name="status">
            <Select
              style={{ width: 150 }}
              onChange={handleChange}
              options={[
                { value: "1", label: "启用" },
                { value: "0", label: "停用" },
              ]}
              placeholder="请选择"
            />
          </Form.Item>
          <Form.Item>
            <Button type="default" htmlType="reset">
              重置
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className="action-buttons">
        <Button type="primary" style={{ marginRight: "10px" }}>
          新增
        </Button>
        <Button style={{ marginRight: "10px" }}>删除</Button>
        <Button style={{ marginRight: "10px" }}>启用</Button>
        <Button>停用</Button>
      </div>
      <div className="post-table">
        <Table
          columns={columns}
          rowSelection={{ ...rowSelection, checkStrictly }}
          dataSource={paginatedData}
          pagination={false}
          scroll={{
            x: "max-content",
            y: 400, // 设置表格内容区域的高度，超出时显示垂直滚动条
          }}
          size="middle"
        />
      </div>

      {/* 分页区域 */}
      <div className="pagination">
        <div className="total-count">总 {data.length} 条</div>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={data.length}
          onChange={(page, size) => {
            setCurrentPage(page);
            setPageSize(size);
          }}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => `总 ${total} 条`}
          pageSizeOptions={["2", "5", "8", "10"]}
        />
      </div>
    </div>
  );
}
